<style type="text/css">
	#ajax-login-box{
		display: none;
		position: fixed;
		top:0px;
		z-index: 999999;
		width: 100%;
		height: 100%;
		text-align: center;
		background: #000;
		background: rgba(0,0,0,.7);
	}
	#ajax-login-box .al-title{
		font-size: 20px;
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #dddddd;
	}
	#ajax-login-box .ajax-login{
		position: relative;
		text-align: left;
		display: inline-block;
		padding: 20px;
		margin-top: 260px;
		width: 360px;
		background: #ffffff;
		border: 1px solid #cccccc;
	}
	#ajax-login-box .al-close{
		position: absolute;
		top: 5px;
		right: 10px;
		font-size: 20px;
		cursor: pointer;
	}
	#ajax-login-box .input-group-addon i{
		font-size: 20px;
	}
	#ajax-login-box .ajax-login input[type="text"],#ajax-login-box .ajax-login  input[type="password"]{
		height: 40px;
	}
	#ajax-login-box .al-btn a{
		display: block;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		text-align: center;
		background: #bf2c24;
		color: #ffffff;
		border: 1px solid #dddddd;
	}
	#ajax-login-box .al-btn a:hover{
		background: #ed4259;
	}
	#ajax-login-box .al-link{
		padding-bottom: 15px;
	}
	#ajax-login-box .al-other-title{
		padding-top: 30px;
		padding-bottom: 10px;
		text-align: center;
		border-bottom: 1px solid #dddddd;
	}
	#ajax-login-box .al-other-list{
		text-align: center;
		padding: 10px 0px;
	}
	#ajax-login-box .al-other-list a{
		display: inline-block;
		margin: 0 5px;
		width: 38px;
		height: 38px;
		line-height: 38px;
		text-align: center;
		color: #ffffff;
		font-size: 18px;
		border-radius: 19px;
		background: #3e3d43;
	}
	#ajax-login-box .al-other-list a:hover{
		background: #bf2c24;
	}
	#ajax-login-box .al-other-list a i{
		width: 18px;
	}
</style>
<div id="ajax-login-box">
	<div class="ajax-login">
		<div class="al-close"><i class="fa fa-close"></i></div>
		<form id="ajax_login" name="ajax_login">
			<div class="al-title">帐号登录</div>
			<div class="form-group">
				<div class="input-group">
					<span class="input-group-addon"><i class="fa fa-user"></i></span>
					<input type="text" name="username" class="al-username form-control" placeholder="用户名">
				</div>
			</div>
			<div class="form-group">
				<div class="input-group">
					<span class="input-group-addon"><i class="fa fa-lock"></i></span>
					<input type="password" name="password" class="al-password form-control" placeholder="密码">
				</div>
			</div>
			<div class="al-link clearfix">
				<a href="#" class="pull-left">忘记密码</a>
				<a href="{:url('book/member.Register/index')}" class="pull-right">免费注册</a>
			</div>
			<div class="al-btn">
				<a href="javascript:;" class="al-btn-submit">登录</a>
			</div>
			<div class="al-other">
				<div class="al-other-title">其它方式登录</div>
				<div class="al-other-list">
					<a href="{:url('book/member.Login/thirdLogin',['oauth'=>'qq'])}"><i class="fa fa-qq"></i></a>
					<a href="{:url('book/member.Login/thirdLogin',['oauth'=>'weixin'])}"><i class="fa fa-weixin"></i></a>
					<a href="{:url('book/member.Login/thirdLogin',['oauth'=>'sina'])}"><i class="fa fa-weibo"></i></a>
				</div>
			</div>
		</form>
	</div>
</div>
<script>
	$(function() {
		$('.public-ajax-login').click(function(){
			$('#ajax-login-box').toggle();
		});
		$('.al-close').click(function(){
			$('#ajax-login-box').hide();
		});

		$(".al-btn-submit").click(function(){
			if($('.al-username').val() == '' || $('.al-password').val() == ''){
				layer.msg('用户名或密码不能为空',{icon: 2,time: 1000});
				return false;
			}
			var _data = $("#ajax_login").serialize();
			var _url = '{:url('book/member.Login/ajaxlogin')}';
			$.ajax({
				type: "POST",
				dataType: "json",
				url: _url,
				data: _data,
				success: function(data) {
					console.log(data);
					if (data.status == 1) {
						layer.msg(data.msg,{icon: 1,time: 1000},function(){
							window.location.reload();
						});
					}else{
						layer.msg(data.msg,{icon: 2,time: 3000});
					}
				},
				error: function(HttpRequest, ajaxOptions, thrownError) {}
			});
		});
	});
</script>